// 该页面为登录页面，已归类到 login 目录
<template>
  <div class="login-bg">
    <div class="login-overlay">
      <div class="login-container">
        <div class="login-header">
          <img class="logo mr10" src="@/assets/img/logo.svg" alt="" />
          <div class="login-title">后台管理系统</div>
        </div>
        <el-form ref="form" :model="param" :rules="loginFormRules" size="large">
          <el-form-item prop="username">
            <el-input v-model="param.username" placeholder="用户名">
              <template #prepend>
                <el-icon>
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="param.password"
              type="password"
              placeholder="密码"
              @keyup.enter="submitForm(form)"
            >
              <template #prepend>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <section class="pwd-tips">
            <el-checkbox v-model="checked" class="pwd-checkbox" label="记住密码" />
            <el-link type="primary" @click="goToChangePassword">忘记密码</el-link>
          </section>

          <el-button class="login-btn" type="primary" size="large" @click="submitForm(form)">
            登录
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import type { FormInstance, FormRules } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import { Lock, User } from '@element-plus/icons-vue'
  import { LS_LOGIN_PARAM, LS_LOGIN_REMEMBER } from '@/constant/local-storage-key.ts'
  import { login } from '@/api/user.ts'
  import { LoginParam, User as UserType } from '@/types'
  import {
    localStorageDelItem,
    localStorageGetItem,
    localStorageSetItem,
  } from '@/utils/local-storage-util.ts'
  import { useUserStore } from '@/store/user.ts'
  import { useParamsStore } from '@/store/params.ts'

  const userStore = useUserStore()
  const paramsStore = useParamsStore()
  const router = useRouter()

  //表单校验规则
  const loginFormRules: FormRules = {
    username: [
      {
        required: true,
        message: '请输入用户名',
        trigger: 'blur',
      },
    ],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  }

  //记住密码
  const checked = ref<boolean>(localStorageGetItem(LS_LOGIN_REMEMBER, false))
  //登陆参数
  const param = reactive<LoginParam>(
    localStorageGetItem(LS_LOGIN_PARAM, {
      username: '',
      password: '',
    })
  )
  param.username = paramsStore.username ? paramsStore.username : param.username
  //登陆表单
  const form = ref<FormInstance>()
  //登陆提交
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    //参数校验
    await formEl.validate()
    const data = await login(param)
    afterLoginSuccess(data)
  }

  //登陆成功后调用
  const afterLoginSuccess = (data: UserType) => {
    ElMessage.success('登录成功')
    //将用户信息储存到store
    userStore.handleSetUser(data)
    //跳转首页
    router.push('/')
    //记住密码
    if (checked.value) {
      localStorageSetItem(LS_LOGIN_PARAM, param)
    } else {
      localStorageDelItem(LS_LOGIN_PARAM)
    }
    localStorageSetItem(LS_LOGIN_REMEMBER, checked.value)
  }
  //跳修改密码页面
  const goToChangePassword = () => {
    //保存当前输入的用户名
    paramsStore.handleSetUsername(param.username)
    router.push('/change-pwd')
  }
</script>

<style scoped>
  .login-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: url(@/assets/img/login-bg.jpg) center/cover no-repeat;
  }

  .login-overlay {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
  }

  .logo {
    width: 35px;
  }

  .login-title {
    font-size: 22px;
    color: #333;
    font-weight: bold;
  }

  .login-container {
    width: 450px;
    border-radius: 5px;
    background: #fff;
    padding: 40px 50px 50px;
    box-sizing: border-box;
  }

  .pwd-tips {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin: 0 0 10px;
    padding: 0 20px;
    color: #787878;
  }

  .pwd-checkbox {
    height: auto;
  }

  .login-btn {
    display: block;
    width: 100%;
  }
</style>
